<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jqgrid宽度高度自适应</title>

<link rel="stylesheet" type="text/css" media="screen" href="jquery/jquery-ui/css/redmond/jquery-ui-1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jquery/jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jquery/jqgrid/plugins/ui.multiselect.css" />
 
<script src="jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="jquery/jquery-ui/js/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
<script src="jquery/jqgrid/js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="jquery/jqgrid/plugins/ui.multiselect.js" type="text/javascript"></script>
<script src="jquery/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="jquery/jquery.cookies.2.2.0.min.js" type="text/javascript"></script>

<script src="js/json2.js" type="text/javascript"></script>


	<style>
		html, body {
			margin: 0;			/* Remove body margin/padding */
			padding: 0;
			overflow: hidden;	/* Remove scroll bars on browser window */	
		    font-size: 80%;
		}
    
    
		<!--
		.zebra-striped {
			background: #efefff 50% 50% repeat-x;
		}
		
		A.button {
			PADDING: 3px 0px 0px 2px; margin: 0px 3px; 
			CURSOR: pointer; COLOR: #000; DISPLAY: inline-block; 
			TEXT-DECORATION: none; FONT-WEIGHT: normal; 
		}
		A.button:focus, A.button:hover {
			COLOR: #00F ! important
		}
		A.remove.button {
			PADDING-LEFT: 20px; BACKGROUND: url('jquery/jquery-easyui/themes/icons/edit_remove.png') no-repeat left center ! important
		}
		A.maxwindow.button {
			PADDING-LEFT: 20px; background: url('images/maxwindow.png') no-repeat left center ! important
		}
		-->
	</style>
	
	<script language='javascript'><!--
		var COOKIE_NAME = 'user_table_cookie';
		var columns = ['loginName', 'realName', 'gender', 'email'];
		$(function() {
			$("#gridTable").jqGrid({
				url:'userData.action',
				datatype: "json",
				autowidth: false,
				altRows: true,
				altclass: "zebra-striped",
				colNames:['登录名','姓名', '性别', '邮箱'],
				colModel:[
					{name:'loginName', index:'loginName', width:160, sorttype:"int"},
					{name:'realName', index:'realName', width:190},
					{name:'gender', index:'gender', width:190,	
						formatter:function(value){
						    if(value == "M"){
							    return "男";
						    }else if(value == "F"){
							    return "女";
						    }else{
							    return "未知";
						    }
						}
					},
					{name:'email',index:'email', width:290}
				],
				sortname:'userId',
				sortorder:'asc',
				viewrecords:true,
				rowNum: 20,
				rowList: [20, 30, 50, 100, 150],
				jsonReader:{
					repeatitems : false,
					id: "userId",
					total: "totalPageCount",
					page: "pageNumber",
					records: "totalRecordCount"
				},
				toolbar: [true, "top"],
				pager:"#gridPager",
				rownumbers: true,
				multiselect: true//,
				//pagerpos: "left"
			});


			$("#t_gridTable").append($('<a id="hidecolumn" class="button remove">列选择</a> <a id="hidesearch" class="button maxwindow">调整</a>'));
			
			$("#hidecolumn").click(function() {
				jQuery("#gridTable").jqGrid('columnChooser');
			});
			$("#hidesearch").click(function() {
				resizeGrid();
			});
			$("#gridTable").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});

			
			jQuery("#gridTable").jqGrid('navGrid','#gridPager',{add:false,edit:false,del:false,search:false,refresh:false});
			jQuery("#gridTable").jqGrid('navButtonAdd','#gridPager',{
			    caption: "Columns",
			    title: "Reorder Columns",
			    onClickButton : function (){
			        jQuery("#gridTable").jqGrid('columnChooser', {
			        	done : function (perm) {
				            if (perm)  {
				                this.jqGrid("remapColumns", perm, true);
				                //alert(perm);
			                    var date = new Date();
			                    date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
				                

				                var tt_perm = [];//计算真实的列顺序
				                var nextIndex = 0;
/*				                rownumbers = this.jqGrid ('getGridParam', 'rownumbers');
				                if(rownumbers && rownumbers == true){
				                	tt_perm.push(nextIndex);
				                	nextIndex++;
				                }
				                multiselect = this.jqGrid ('getGridParam', 'multiselect');
				                if(multiselect && multiselect == true){
				                	tt_perm.push(nextIndex);
				                	nextIndex++;
				                }
				                alert(tt_perm);*/
				                
				                colMod = this.jqGrid ('getGridParam', 'colModel');
				                for(var i=0; i<colMod.length; i++){
					                //alert(colMod[i].name + ":" + colMod[i].hidden);
				                    $.cookies.set(COOKIE_NAME + "_" + colMod[i].name, colMod[i].hidden, { path: "/", expiresAt: date });
				                    var index = indexOf(columns, colMod[i].name);
				                    if(index < 0){
					                	tt_perm.push(nextIndex);
					                	nextIndex++;
				                    }else{
					                	tt_perm.push(index+nextIndex);
				                    }
				                }
			                    $.cookies.set(COOKIE_NAME + "_remapColumns", tt_perm, { path: "/", expiresAt: date });
				            }
				        }
			        });
				}
			});

			reorderGrid();
			resizeGrid();
		});


		function indexOf(array, value){
			for ( var i = 0; i < array.length; i++) {
				if(array[i]==value){
					return i;
				}
			}
			return -1;
		}

		function reorderGrid(){
			colModel = $("#gridTable").jqGrid('getGridParam', 'colModel');
			for ( var i = 0; i < colModel.length; i++) {
				var tt = $.cookies.get(COOKIE_NAME + "_" + colModel[i].name);
				if(tt && tt==true){
					$("#gridTable").jqGrid('hideCol', colModel[i].name, tt);
				}
			}
			var ppperm = $.cookies.get(COOKIE_NAME + "_remapColumns");
			if(ppperm){
				$("#gridTable").jqGrid("remapColumns", ppperm, true);
			}
		}
		
		var tw;
		var th;
		window.onresize = function(){
			resizeGrid();
		}

		function resizeGrid(){
			var tw2 = getPageWidth();
			var th2 = getPageHeight();
			if(tw != tw2){
				tw = tw2;
				changeWidth(tw2);
			}

			if(th != th2){
				th = th2;
				changeHeight2(th2);
				//setTimeout("changeHeight()", 1000);//延时
			}
		}

		function changeWidth(tw2, th2) {
			$("#gridTable").jqGrid('setGridWidth', tw2-10);
	    }
		function changeHeight2(th2) {
			$("#gridTable").jqGrid('setGridHeight', th2-102);
	    }
		function changeHeight() {
			$("#gridTable").jqGrid('setGridHeight', getPageHeight()-90);
			return true;
	    }

		function getPageWidth() {
			var winWidth;
			if(window.innerHeight) {// all except IE
				winWidth = window.innerWidth;
			} else if (document.documentElement && document.documentElement.clientWidth) {// IE 6 Strict Mode
				winWidth = document.documentElement.clientWidth;
			} else if (document.body) { // other
				winWidth = document.body.clientWidth;
			}  // for small pages with total size less then the viewport  
			return winWidth;
		}

		function getPageHeight() {
			var winHeight;
			if(window.innerHeight) {// all except IE
				winHeight = window.innerHeight;
			} else if (document.documentElement && document.documentElement.clientHeight) {// IE 6 Strict Mode
				winHeight = document.documentElement.clientHeight;
			} else if (document.body) { // other
				winHeight = document.body.clientHeight;
			}  // for small pages with total size less then the viewport  
			return winHeight;
		}
		
		//http://www.wsria.com/archives/1147有另一种算法
	--></script>
</head>
<body style="margin: 2px 2px">
	<table id="gridTable"></table>
	<div id="gridPager"></div>
</body>
</html>